<template>
  <div style="width: 100%; height: 100%">
    <div id="viewerContainer" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script lang="ts" setup>
import '@grapecity/ar-viewer/dist/jsViewer.min.js';
import '@grapecity/ar-viewer/dist/jsViewer.min.css';
import { Colgroup } from 'vxe-table';
import { ref, reactive, getCurrentInstance, onMounted, computed, toRefs, watch, defineProps } from 'vue';
import { IsEmpty } from '@/utils/common';
let { proxy }: any = getCurrentInstance();
let win = window;
let reportId = '';
let viewer = null;

let props = defineProps({
  reportName: String,
  reportParamter: Object,
  isShowParamPanel: Boolean
});

onMounted(() => {
  initViewer();
});

watch(
  () => proxy.$router.currentRoute,
  (to, from) => {
    proxy.$nextTick(() => {
      proxy.selectedRpt = proxy.$route.query.param;
      setTimeout(() => {
        proxy.reportParameter = {
          id: 't' + new Date().valueOf(),
          reportId: proxy.$route.query.param,
          reportParams: null
        };
      }, 500);
    });
  }
);
watch(
  () => props.reportParamter,
  (n, o) => {
    if (viewer) {
      reportId = n.reportId;
      reloadRpt();
    } else {
      reportId = n.reportId;
      setTimeout(() => {
        initViewer(() => {
          reloadRpt();
        });
      }, 300);
    }
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => props.reportName,
  (nVal, oVal) => {
    if (viewer) {
      reportId = nVal;
      reloadRpt1();
    } else {
      reportId = nVal;
      setTimeout(() => {
        initViewer(() => {
          reloadRpt1();
        });
      }, 300);
    }
  },
  {
    immediate: true,
    deep: true
  }
);

function initViewer(callback = null) {
  if (viewer) {
    if (callback) {
      callback();
    }
    return;
  }
  viewer = new GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportService: {
      url: window.apiUrl.VUE_APP_PRINT_URL + '/api/reporting'
    },
    parametersPanel: {
      location: win.params.parametersPanel
    },
    action: (e, v) => {
      //ToDo
    },
    reportLoaded: (e) => {
      //ToDo
    },
    documentLoaded: (e) => {
      try {
        if (win.params && win.params.parametersPanel === 'left' && (isShowParamPanel || true)) {
          const btns = document.getElementsByClassName('gc-btn gc-btn--block gc-btn--with-icon gc-btn--accent gc-size-lg');
          for (const element of btns) {
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
          }
          if (win.params.isOpenedparametersPanel && isShowParamPanel) {
            const pins = document.getElementsByClassName('gc-btn gc-btn-pin gc-btn--block gc-btn--with-icon gc-btn--transparent');
            for (const element of pins) {
              if (element.getAttribute('title') === 'Pin') {
                element.click();
              }
            }
          }
        } else if (win.params.parametersPanel === 'top') {
          const btns = document.getElementsByClassName('gc-btn gc-btn--with-icon gc-btn--transparent gc-rounded');
          for (const element of btns) {
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
          }
        }
        if (callback) {
          callback();
        }
      } catch (error) {
        //ToDo
      }
    },
    error: (error) => {
      if (error.message) {
        //ToDo
      }
    }
  });
}
function reloadRpt() {
  if (IsEmpty(props.reportParamter.reportId)) {
    return;
  }
  if (IsEmpty(reportId)) {
    return;
  }
  viewer.openReport(props.reportParamter.reportId, props.reportParamter.reportParams);
  //潍坊检测任务
  //viewer.openReport('7180测试模板.rdlx', [{ Name: 'id', Values: ['1550369798817947650'] }]);
}
function reloadRpt1() {
  if (IsEmpty(props.reportParamter.reportId)) {
    return;
  }
  if (IsEmpty(reportId)) {
    return;
  }
  setTimeout(() => {
    viewer.openReport(props.reportParamter.reportId, IsEmpty(props.reportParamter.reportParams) ? null : props.reportParamter.reportParams);
  }, 500);
  //潍坊检测任务
  //viewer.openReport('AcmeStore.rdlx', [{ Name: 'id', Values: ['1550369798817947650'] }]);
}
function printRpt() {
  viewer.print();
}
</script>
<style scoped>
#viewerContainer {
  width: 99%;
  height: calc(100vh - 50px);
}

:deep(.ar-report-viewer .gc-viewer) {
  background-color: #fafefe !important;
  width: 100% !important;
}

:deep(.ar-report-viewer .gc-menu__panel-container) {
  background-color: #fafefe !important;
}

:deep(.ar-report-viewer .gc-menu__btn-container) {
  background-color: #fafefe !important;
}

:deep(.ar-report-viewer .gc-btn--accent) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: #205f78 !important;
}

:deep(.ar-report-viewer .gcv-pageview--margin > *) {
  margin: 0 !important;
}
:deep(.gcv-pageview) {
  display: flex;
  justify-content: center;
}
</style>
